<template>
  <div class="video-area" :style="videoStyle">
    <!--		<video v-if="hasVideo" :src="sectionData.data.url" loop controls id="videoBox">-->
    <!--            <video v-if="hasVideo" :src="url" loop controls id="videoBox"> </video>-->
    <iframe
      v-if="hasVideo"
      :src="src"
      width="100%"
      :height="iframeHeight"
      style="display: block; overflow: hidden; border: none"
      allowFullScreen="true"
      webkitAllowFullScreen="true"
      mozAllowFullScreen="true"
      resize="none"
      scrolling="no"
    ></iframe>
    <!-- <video v-if="hasVideo" loop controls>
			<source :src="sectionData.videoUrl" type="video/mp4"></source>
		</video> -->
    <img :src="imgUrl" :style="coverStyle" v-if="!hasVideo" />
    <div class="video-name" v-if="sectionData.options.videoName">{{
      sectionData.options.videoName
    }}</div>
  </div>
</template>

<script>
  import { methods } from '@/utils';
  export default {
    name: 'Vide',
    props: {
      withBorder: {
        type: Boolean,
        default: false
      },
      sectionData: {
        type: Object,
        default: () => ({})
      },
      contentWidth: { type: Number }
    },
    data() {
      return {
        // videoSrc: require("../../assets/video/test.mp4")
        imgUrl: require('../../assets/video/video.jpg'),
        contentHeight: methods.getContentHeight(this.sectionData.options),
        iframeHeight: 0,
        src: '',
        videoStyle: {},
        hasVideo: this.sectionData.data.videoId
        // imgUrl: _basePath + '/entry/assets/video/video.jpg'
      };
    },
    computed: {
      coverStyle() {
        let style = {
          boxSizing: 'border-box',
          width: '100%',
          height: '100%'
        };
        if (!this.withBorder) {
          style.padding = '10px 15px';
        }
        return style;
      }
    },
    created() {
      let height = this.contentHeight;
      let padding = 0;
      if (this.sectionData.options.videoName) {
        height = height - 50;
        padding = 50;
      }

      this.iframeHeight = height;

      this.src = `${urlPreStr}/media/media.do?method=mediaShow&mediaId=${
        this.sectionData.data.videoId
      }&width=${this.contentWidth - 20}&height=${this.iframeHeight}`;

      this.videoStyle = {
        backgroundColor: this.sectionData.options.backgroundColor,
        width: '100%',
        overflow: 'hidden',
        height: `${height}px`,
        paddingBottom: `${padding}px`
      };
    },
    mounted() {
      // console.log('this.sectionData.data.videoId', this.sectionData.data.videoId);
      // IE8的话这里要用video.js来控制video
      //var player = videojs('videoBox');
      //console.log(player)
    }
  };
</script>

<style scoped lang="scss">
  .video-area {
    width: 100%;
    height: 100%;

    .video-name {
      height: 50px;
      margin: 0;
      line-height: 50px;
      text-align: center;
    }

    video {
      /* 视频铺满盒子 */
      object-fit: fill;
      width: 100%;
      height: 100%;
      outline: none;

      source {
        width: 100%;
        height: 100%;
      }
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
